<template>
  <div class="box">
    <div class="top" v-if="$slots.header">
      <slot name="header"></slot>
    </div>
    <div class="main">
      <div class="mainItem" v-for="item in lists" :key="item.id">
        <slot name="body" :item="item"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    lists: {
      type: Array,
    },
  },
}
</script>

<style scoped>
.box {
  width: 300px;
  border-radius: 10px;
  margin-top: 20px;
}
.top {
  height: 40px;
  color: #fff;
  padding: 0px 20px;
  line-height: 40px;
  font-size: 16px;
  background: linear-gradient(90deg, #1476ff, #72d0fb);
}
.main {
  background-color: #fff;
  padding: 10px 0px;
}

.main .mainItem {
  display: flex;
  /* height: 50px; */
  justify-content: space-between;

  font-size: 20px;
  padding: 15px 0px;
  margin: 0px 20px;
  border-bottom: 1px solid #ccc;
}
</style>
